<template>
	<view>
		<view class="header-bg">
			<view class="header">Scroll内使用示例</view>
		</view>
		<view style="padding: 30rpx;">App端滚动scroll结束时需调用一次组件show，其他端不需要主动调用</view>
		<view style="padding: 30rpx;">此示例演示在部分区域内滚动，传rangeScroll：true时超出区域隐藏组件，若是整屏的scroll则不需要</view>
		<scroll-view scrollY style="height: 400rpx;background-color: antiquewhite;" @scroll="onscroll">
			<view style="height: 100rpx;" v-for="(v,i) in 10" :key="'v_'+i">{{i}}</view>
			<view>提示：debug传true时会看见选择框，调试完成后请传false</view>
			<view>
				<lsj-upload
				ref="lsjUploadRef"
				debug
				rangeScroll
				:width="width"
				:height="height"
				:option="option"
				:toBase="toBase"
				@changeFile="onChange"
				@progress="onprogress"
				@uploadEnd="onuploadEnd"
				@observeChange="onObserveChange"
				>
					<view style="background-color: #007AFF;" :style="{width: width,height: height}">自定义选择按钮</view>
				</lsj-upload>
			</view>
			
			
			<!-- #ifndef MP-WEIXIN -->
			<view v-for="(item,index) in files.values()" :key="index">
				<image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
				<text>{{ item.name }}</text>
				<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
				<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
				<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
				<text v-if="item.responseText" style="margin-left: 10rpx;">服务端数据：{{ item.responseText }}</text>
				<text style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;" @click="clear(item.name)">删除</text>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<view v-for="(item,index) in wxFiles" :key="index">
				<text>{{ item.name }}</text>
				<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
				<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
				<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
				<view>
					<button @click="clear(item.name)">删除</button>
				</view>
			</view>
			<!-- #endif -->
			
			<view style="height: 100rpx;" v-for="(v,i) in 10" :key="'vb_'+i">{{i}}</view>
		</scroll-view>
		
		<button style="margin: 30rpx;" @click="onHideUpload">主动隐藏</button>
		<button style="margin: 30rpx;" @click="onShowUpload">恢复显示</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					// 上传服务器地址，该地址非真实路径，需替换为你项目自己的接口地址
					url: 'http://hl.jw.com/dropbox/document/upload',
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// 传文件流时无需设置Content-Type
						// 'Content-Type': 'application/json',
						// 示例参数可删除
						'Authorization': 'bearer aa',
						'uid': '27',
						'accountid': '27'
					},
					// 根据你接口需求自定义body参数
					formData: { 
						'orderId': 1000
					}
				},
				width: '180rpx',
				height: '180rpx',
				toBase: false,
				// 文件回显列表
				files: new Map(),
			}
		},
		methods: {
			onHideUpload() {
				uni.$emit('$upload-hide');
			},
			onShowUpload() {
				uni.$emit('$upload-show');
			},
			// App端scroll滚动结束时需调用一次组件show
			onscroll(e) {
				// #ifdef APP
				if (this.scrollTime) {
					clearTimeout(this.scrollTime);
				}
				this.scrollTime = setTimeout(()=> {
					uni.$emit('$upload-show');
					console.log('透明层位置已更新');
				},300)
				// #endif
			},
			
			// 移除某个文件
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs.lsjUploadRef.clear(name);
			},
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item,childId) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);
				// 更新当前窗口状态变化的文件
				this.files.set(item.name,item);
				
				// ---可删除--演示上传完成后取服务端数据
				if (item['responseText']) {
					console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组，
				// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				
				// 强制更新视图
				this.$forceUpdate();
				
				
				// ---可删除--演示判断是否所有文件均已上传成功
				let isAll = [...this.files.values()].find(item=>item.type!=='success');
				if (!isAll) {
					console.log('已全部上传完毕');
				}
				else {
					console.log(isAll.name+'待上传');
				}
				
			},
			// 上传进度回调
			onprogress(item,childId) {
				// 更新当前状态变化的文件
				this.files.set(item.name,item);
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				
				// 强制更新视图
				this.$forceUpdate();
				
			},
			// 文件选择回调
			onChange(files,childId) {
				console.log('已选择的文件Map',JSON.stringify([...files]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()]; 
				// #endif
				
				// ---可删除--演示重新定位覆盖层控件
				this.$nextTick(()=>{
					console.log('演示重新定位 (提示：像示例里文件列表在按钮上方时就需要插入文件后更新webview位置)');
					// 直接更新当前页面所有上传组件webview位置
					uni.$emit('$upload-show',{});
				});
				
			},
			// 监听滚动出scroll和进入
			onObserveChange(appear,e) {
				console.log(appear,e);
			}
		}
	}
</script>

<style>

</style>
